<template>
	<div class="flex flex-direction justify-center align-center">
		<el-card class="history-card margin-bottom" shadow="never" style="min-width: 400px;" body-style="padding:30px 30px 5px 5px;">
		  <div slot="header">
		    <span>审批历史</span>
		  </div>
		  <el-timeline v-loading="tabLoading">
		  	<el-timeline-item v-for="(d, index) in data" :key="d.id"
		  		:type="getTypeStr(d.type)" size="large" :timestamp="d.create_at">
		  		<div class="flex justify-start align-center flex-no-wrap">
		  			<div>
		  				<el-tag v-if="d.type==-1" type="info" size="mini" effect="plain">结束</el-tag>
		  				<el-tag v-if="d.type==0" type="primary" size="mini" effect="plain">提交</el-tag>
		  				<el-tag v-if="d.type==1" type="success" size="mini" effect="plain">通过{{!!d.node_name?('('+d.node_name+')'):''}}</el-tag>
		  				<el-tag v-if="d.type==2" type="danger" size="mini" effect="plain">退回{{!!d.node_name?('('+d.node_name+')'):''}}</el-tag>
		  				<el-tag v-if="d.type==3" type="warning" size="mini" effect="plain">重审{{!!d.node_name?('('+d.node_name+')'):''}}</el-tag>
		  			</div>
		  			<div class="margin-left">{{d.user}}</div>
		  		</div>
		  		<div v-if="!!d.opinion">审批意见：{{d.opinion}}</div>
		  	</el-timeline-item>
		  </el-timeline>
		</el-card>
	</div>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash'
	import {
		check_history2
	} from '@/api/handle/personal_handle.js'
	export default {
		name: 'FlowCheckHistory',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		beforeDestroy() {},
		props: {
			flowType: { // 流程类型
				type: Number,
				default: null
			},
			dataId: { // 数据id
				type: Number,
				default: null
			}
		},
		data() {
			return {
				data: [],
				tabLoading: false,
			}
		},
		watch: {
			flowType: {
				handler(val, oldVal) {
					if (!!val && !!this.dataId) this.getCheckHistory();
				}
			},
			dataId: {
				handler(val, oldVal) {
					if (!!val && !!this.flowType) this.getCheckHistory();
				}
			}
		},
		created() {
		},
		mounted() {
			this.getCheckHistory();
		},
		methods: {
			getTypeStr(dType){
				if(dType == -1) return 'info';
				if(dType == 0) return 'primary';
				if(dType == 1) return 'success';
				if(dType == 2) return 'danger';
				if(dType == 3) return 'warning';
			},
			getCheckHistory() {
				if (!!this.flowType && !!this.dataId) {
					this.tabLoading = true;
					return check_history2({
							flow_type: this.flowType,
							data_id: this.dataId
						})
						.then(({
							data
						}) => {
							this.tabLoading = false;
							this.data = data || [];
						})
						.catch(() => {
							this.tabLoading = false;
						})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-card.history-card.is-never-shadow{
		min-width: 400px !important;
	}
</style>
